const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
    },
    resolve: {
        extensions: [".js", ".json", ".css", ".less", ".scss"],
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
    devServer: {
        port: 8080, // 配置开发预览服务器的端口号
        open: true, // 自动打开浏览器
    },
    // 配置相关loader
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", {
                    loader: "css-loader",
                    options: {
                        url: true, // 启动 或者 禁用  url 解析功能.  url(./tang.jpg);
                        import: true, // 是否允许 或者说 禁用 @import 语法处理 @import "base.css"
                        modules: false, // 是否允许 css 模块化
                        sourceMap: true, // 是否生成 sourceMap
                        // importLoaders: true, // 放在 CSS 兼容性的时候演示
                        // 默认情况下,  css-loader 会生成一个使用 ES Module的模块对象, 如果你设置为 true 的话, 那就会包装成 ESMODULES,导出是一个对象
                        // 用 let styles2  = require ("./index.css") 方式引入时, {default:{}} 中 default 才是对应的 css 对象
                        // esModule: true,
                    },
                }, "postcss-loader"],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
            },
            // 处理静态图片资源loader
            {
                test: /\.(jpg|png|bmp|gif)/,
                type: "asset/resource",
                generator: {
                    filename: '[hash][ext]',
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],
}